<template>
	<!-- 我的 -->
	<view>
		<view class="top">
			<view class="userinfos">
				<view class="user">
					  <image :src="userInfo.avatar=='' ? '/static/images/newhone/logo.png':userInfo.avatar" class="avatar" @click="toChange"></image>
					<view class="userinfo">
						<view class="userinfo_top">
							<view class="userinfo_top_name">{{userInfo.user_name}}</view>
							<!-- <view class="userinfo_top_phone">{{userInfo.phone}}</view> -->
						</view>
						<view class="userinfo_bot">
							<view class="userinfo_bot_level">
								<image :src="userInfo.img"></image>
								<text>{{userInfo.level_name}}</text>
							</view>
							<image src="/static/images//minecenter/help.png" @click="showProduction" class="help"></image>
						</view>
					</view>
				</view>
				<navigator url="./becomeMember" v-if="myInfo.vip_data == 1 && userInfo.is_member == 1">
					<image src="/static/images/mine/vip.png" class="vipicon"></image>
				</navigator>
				<navigator class="upvip" url="./becomeMember" v-if="myInfo.vip_data == 1 && userInfo.is_member == 0">升级vip</navigator>
				<navigator class="message" url="./message/message">
					<image src="/static/images/mine///xiaoxi.png"></image>
					<view class="dot" v-if="messageNum>99">99+</view>
					<view class="dot" v-if="messageNum>0">{{messageNum}}</view>
				</navigator>
			</view>
			<view class="money">
				<navigator class="money_item" url="./wallet/wallet">
					<view class="money_item_num">{{userInfo.balance || 0}}</view>
					<view class="money_item_text">心愿币</view>
				</navigator>
				<view class="columnline"></view>
				<navigator class="money_item" url="./integral">
					<view class="money_item_num">{{userInfo.point || 0}}</view>
					<view class="money_item_text">积分</view>
				</navigator>
				<view class="columnline"></view>
				<navigator class="money_item" url="/pages/mine/promotionCenter/promotionCenter">
					<view class="money_item_num">{{userInfo.cashable_income || 0}}</view>
					<view class="money_item_text">佣金</view>
				</navigator>
			</view>
		</view>
		<overlay title="会员说明" :content="memberdescInfo" ref="overlay" />
		<!-- 订单管理 -->
		<view class="order_management">
			<view class="order_management_title">
				<view class="caitiao"></view>
				<view class="text1">订单管理</view>
			</view>
			<view class="order_management_status">
				<view class="order_status" @click="navOrderManagement(1)">
					<image src="/static/images///minecenter//tihuo.png" mode=""></image>
					<view class="text">提货订单</view>
				</view>
				<view class="order_status" @click="navOrderManagement(2)">
					<image src="/static/images/minecenter/putong.png" mode=""></image>
					<view class="text">普通订单</view>
				</view>
				<view class="order_status" @click="navOrderManagement(3)">
					<image src="/static/images//minecenter/jinfendingdan.png" mode=""></image>
					<view class="text">积分订单</view>
				</view>
				<view class="order_status" @click="navOrderManagement(4)">
					<image src="/static/images//minecenter///duihuandingdan.png" mode=""></image>
					<view class="text">兑换订单</view>
				</view>
			</view>
		</view>
		<navigator url="/pages/index/signin">
			<image src="/static/images/newhone/zhuanpan.png" class="signbg"></image>
		</navigator>
		<!-- 常用工具 -->
		<view class="tool_list">
			<navigator class="tool" url="/pages/mine/promotionCenter/promotionCenter">
				<view class="title">
					<image src="/static/images//minecenter/tuiguang.png"></image>
					<text>推广中心</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="tool" url="/pages/blindbox/rankinglist">
				<view class="title">
					<image src="/static/images//minecenter/ouqi.png"></image>
					<text>欧气榜</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="tool" url="/pages/blindbox/achievement">
				<view class="title">
					<image src="/static/images//minecenter/chengjiu.png"></image>
					<text>我的成就</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="tool" url="/pages/mine/prop/prop">
				<view class="title">
					<image src="/static/images//minecenter/daoju.png"></image>
					<text>道具</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="tool" url="/pages/package/package">
				<view class="title">
					<image src="/static/images//minecenter/beibao.png"></image>
					<text>背包</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="tool" url="/pages/mine/addressManagement/addressManagement">
				<view class="title">
					<image src="/static/images//minecenter/shouhuo.png"></image>
					<text>收货地址</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="tool" url="/pages/mine/setup/setup">
				<view class="title">
					<image src="/static/images//minecenter/shezhi.png"></image>
					<text>设置</text>
				</view>
				<image src="/static/images/mine/more.png" class="more"></image>
			</navigator>
		</view>
		<!-- 版权信息 -->
		<!-- <view class="copyright">2021-2025 久云网络科技有限公司.All Rights Reserved.版权所有</view> -->
		<!-- 底部导航 -->
		<tabBar :currentPage="3" :messageNum="messageNum" />
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar'
	import overlay from '@/components/overlay'
	export default {
		components:{
			tabBar,
			overlay
		},
		data() {
			return {
				myInfo:{},//我的信息
				userInfo: {//用户信息
					user_name: '',
					avatar: '',
					phone: '',
					open_id: '', //是否已绑定微信
					alipay_user_id: '' ,//是否已绑定支付宝
					balance:'',//心愿币
					is_member:'',//1=是会员,0=非会员
					level_name:'',//开盒等级
					point:'',//积分
					promotion_revenue:''//推广收益
				},//用户信息
				messageNum:'',//未读消息数量
				memberdescInfo:'',//会员说明
			}
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '请登录以继续查看',
				// 	showCancel:false,
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			uni.navigateTo({
				// 				url: '/pages/login/login'
				// 			})
				// 		}
				// 	}
				// })
			}else{
				this.getMyindex();
			}
		},
		onPullDownRefresh() {
			if(!uni.getStorageSync('token')){
				uni.showModal({
					title: '温馨提示',
					content: '请登录以继续查看',
					showCancel:false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			}else{
				this.getMyindex();
			}
		},
		methods: {
			//获取我的信息
			getMyindex(){
				this.$api.myindex().then(res=>{
					this.myInfo = res;
					this.userInfo = res.user;
					this.messageNum = parseInt(res.message_num);
					this.getMemberintroduce();
				})
			},
			//修改个人信息
			toChange(){
				uni.navigateTo({
					url:'/pages/mine/setup/setup_userinfo'
				})
			},
			//获取会员说明
			getMemberintroduce(){
				this.$api.memberintroduce().then(res=>{
					uni.stopPullDownRefresh();
					this.memberdescInfo = res;
				})
			},
			//显示等级说明
			showProduction(){
				this.$refs.overlay.show();
			},
			//跳转订单管理
			navOrderManagement(e) {
				uni.setStorage({
					key:'order_type',
					data:e,
					success: (res) => {
						uni.navigateTo({
							url: '/pages/mine/orderManagement/orderManagement'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	padding-bottom: 200rpx;
}
.top{
	width: 750rpx;
	height: calc(var(--status-bar-height) + 613rpx);
	background-image: url("@/static/images/oneImage/beijingw.png");
	background-size: 100% 100%;
	padding-top: calc(var(--status-bar-height) + 72rpx);
	box-sizing: border-box;
}
.userinfos{
	@include between;
	padding: 0 30rpx;
	
	.user{
		@include align-center;
		
		.avatar{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}	
		.userinfo{
			margin-left: 30rpx;
			
			&_top{
				@include align-center;
				
				&_name{
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					width: 300rpx;
					@include one;
				}
				&_phone{
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 33rpx;
				}
			}
			&_bot{
				width: 210rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				@include align-center;
				padding: 0 5rpx;
				margin-top: 32rpx;
				
				&_level{
					@include center;
					margin-right: 20rpx;
					
					image{
						width: 30rpx;
						height: 30rpx;
					}
					text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: 11rpx;
					}
				}
			}
		}
	}
	.upvip{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-style: italic;
		color: #FFFFFF;
	}
	.vipicon{
		width: 74rpx;
		height: 74rpx;
	}
	.help{
		width: 40rpx;
		height: 42rpx;
	}
	.message{
		width: 54rpx;
		height: 54rpx;
		margin-right: 20rpx;
		position: relative;
		
		image{
			@include img;
		}
		.dot{
			width: 50rpx;
			height: 30rpx;
			background: #FFFFFF;
			border: 1rpx solid #FF0000;
			border-radius: 10rpx 10rpx 10rpx 0;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF6609;
			@include center;
			position: absolute;
			top: -10rpx;
			right: -25rpx;
		}
	}
}
.money{
	@include between;
	margin: 46rpx auto 0;
	width: 714rpx;
	height: 160rpx;
	background: rgba(255,255,255,0.3);
	border-radius: 12rpx;
	
	.columnline{
		width: 1rpx;
		height: 90rpx;
		background-color: #E6E6E6
	}
	&_item{
		@include column-center;
		
		&_num{
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			width: 236rpx;
			@include one;
			text-align: center;
		}
		&_text{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}
}
.order_management {
	width: 714rpx;
	height: 254rpx;
	background-color: $white;
	box-shadow: 0 0 7rpx 1rpx rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
	margin: -180rpx auto 0;

	.order_management_title {
		@include align-center;
		padding: 30rpx 16rpx 0;
		
		.caitiao{
			width: 4rpx;
			height: 24rpx;
			background: #583BFF;
			margin-right: 12rpx;
		}
		.text1 {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #1D1D1D;
		}

		.text2 {
			@include align-center;

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			image {
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}
	}

	.order_management_status {
		@include between;
		padding: 0 24rpx;

		.order_status {
			@include column-center;
			margin-top: 20rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				margin-top: 16rpx;
			}
		}
	}
}
.signbg{
	width: 720rpx;
	height: 185rpx;
	margin:  15rpx;
}
.tool_list {
	width: 720rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 15rpx;
	padding: 0 30rpx;
	box-sizing: border-box;

	.tool {
		@include between;
		height: 100rpx;
		
		.title{
			@include align-center;
			
			image{
				width: 50rpx;
				height: 50rpx;
			}
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-left: 32rpx;
			}
		}
		.more {
			width: 34rpx;
			height: 34rpx;
		}
	}
}
.copyright{
	width: 100%;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #CCCCCC;
	text-align: center;
	margin-top: 30rpx;
}
</style>
